<template>
  <div class="huoDongReDu">
    <div class="top-tools">
      <h3>活动热度排行榜</h3>
      <div class="select-school">
        <!-- <span>查看更多</span> -->
      </div>
    </div>
    <div class="table-box">
      <el-table class="table-content" :data="tableList" size="mini" border style="width: 100%">
        <el-table-column prop="sort" label="排名" width="50"></el-table-column>
        <el-table-column prop="title" label="活动名称">
          <template class="nowarp" slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程体系" width="110"></el-table-column>
        <el-table-column prop="numBer" label="参与人数" width="70"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableList: [
        {
          sort: 1,
          title: "“奋斗的我，最美的国”2019-20...",
          name: "红色筑梦计划",
          numBer: 8353
        },
        {
          sort: 2,
          title: "青春告白祖国主题团日——云栖...",
          name: "红色筑梦计划",
          numBer: 6296
        },
        {
          sort: 3,
          title: "西安电子科技大学学生会迎新晚会",
          name: "多彩青春计划",
          numBer: 362
        },
        {
          sort: 4,
          title: "《长征组歌》交响合唱音乐会",
          name: "多彩青春计划",
          numBer: 300
        },
        {
          sort: 5,
          title: "美育公开课系列-陕西广播民族《...",
          name: "其他",
          numBer: 253
        },
        { sort: 6, title: "线上云合奏", name: "其他", numBer: 200 },
        { sort: 7, title: "跑圈集口罩", name: "其他", numBer: 240 },
        {
          sort: 8,
          title: "“放飞一片心灵，拥抱一份健康...",
          name: "全球胜任力计划",
          numBer: 120
        }
      ]
    };
  }
};
</script>
<style>
    .el-table th, .el-table tr{
        background-color: transparent;
        background:rgba(32,34,36,1);
        color: #fff;
    }
    .el-table--mini td, .el-table--mini th{
        padding: 8px 0;
    }
    .el-table--mini th{
        background:rgba(42,85,255,0.4);
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom: 1px solid #2A55FF;
        border-right: 1px solid #2A55FF;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td{
        background-color: rgba(32,34,36,1);
    }
    .el-table::before,.el-table::after{
        background-color: #2A55FF;
    }
    .el-table--border, .el-table--group{
        border: 1px solid #2A55FF;
        border-right: none;
        border-bottom: none;
    }
    .el-table__empty-block{
        background-color: rgba(32,34,36,1);
    }
    .el-table .cell {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      line-height: 23px;
      padding-right: 10px;
    }
</style>
<style lang="scss" scoped>
.huoDongReDu {
  padding: 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
    .select-school {
      span {
        cursor: pointer;
        color: #00ffee;
      }
    }
    .nowarp{
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
